* {
  margin: 0;
  padding: 0;
  box-sizing: border-box !important;
  font-family: 微软雅黑 !important;
}
html,
:root {
  font-size: 62.5%;
  background-color: lightblue;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
}
#app {
  background: url(../img/bg.jpg) no-repeat;
  background-size: cover;
}
#app > .date {
  font-size: 1vw;
  color: #00DFFF;
  position: absolute;
  top: 1.5vh;
  right: 2vw;
}
#app > .container {
  margin-top: 9vh;
  padding: 0 1vw;
}
#app > .container .title {
  width: 96%;
  font-size: 2vh;
  text-align: center;
  color: #00DFFF;
  padding: 2vh 0;
  background: url(../img/title.png) no-repeat;
  background-size: contain;
  background-position-y: center;
}
#app > .container > div {
  width: 31%;
  height: 89vh;
  overflow: hidden;
}
#app > .container > .left {
  background: url(../img/left.png) no-repeat rgba(0, 15, 71, 0.3);
  background-size: 100% 100%;
}
#app > .container > .left > div {
  width: 100%;
  overflow: hidden;
}
#app > .container > .left > .top {
  height: 34vh;
}
#app > .container > .left > .top > .list {
  width: 25vw;
  height: 25vh;
  align-content: space-between;
}
#app > .container > .left > .top > .list > li {
  width: 12vw;
  height: 11.7vh;
  padding: 0 1vw;
  background-size: 100% 100%;
}
#app > .container > .left > .top > .list > li > img {
  width: 5vh;
}
#app > .container > .left > .top > .list > li > .right .name {
  font-size: 1.5vh;
  color: #fff;
}
#app > .container > .left > .top > .list > li > .right .data {
  color: #00DFFF;
  font-size: 2vh;
}
#app > .container > .left > .min1 {
  height: 25.5vh;
}
#app > .container > .left > .min1 > .circle {
  width: 88%;
  height: 10vh;
}
#app > .container > .left > .min1 > .circle .card {
  width: 15vw;
}
#app > .container > .left > .min1 > .circle .card img {
  width: 3.5vw;
  height: 10vh;
  transition: all 0.5s;
}
#app > .container > .left > .min1 > .circle .is-active img {
  width: 3.8vw !important;
  height: 11vh !important;
}
#app > .container > .left > .min1 > .footer {
  width: 23vw;
  height: 5vh;
  margin: 0.6vh 1vw;
}
#app > .container > .left > .min1 > .footer > div {
  height: 100%;
}
#app > .container > .left > .min2 {
  height: 9vh;
  padding: 0 2.5vw;
}
#app > .container > .left > .min2 > .svg {
  font-size: 3vh;
  color: #00DFFF;
}
#app > .container > .left > .bottom {
  height: 20vh;
}
#app > .container > .left > .bottom > .title {
  padding-bottom: 0.5vh !important;
}
#app > .container > .left > .bottom > .bottom {
  width: 100%;
  height: 13vh;
  padding: 0 2vw;
}
#app > .container > .left > .bottom > .bottom > #consumption {
  width: 16vw;
  height: 100%;
  position: relative;
  translate: scale(0.9, 0.9);
  -webkit-transform: scale(0.9, 0.9);
  /*兼容-webkit-引擎浏览器*/
  -moz-transform: scale(0.9, 0.9);
  padding: 0px;
  margin: 0px;
  border-width: 0px;
  cursor: default;
}
#app > .container > .left > .bottom > .bottom > #consumption > div {
  width: 100% !important;
  height: 100% !important;
}
#app > .container > .left > .bottom > .bottom > .summarize {
  width: 6vw;
  height: 100%;
  padding-bottom: 2vh;
}
#app > .container > .mid {
  width: 33vw;
  padding-top: 3vh;
}
#app > .container > .mid > div {
  width: 100%;
}
#app > .container > .mid > .top {
  height: 40vh;
  border: 1px solid rgba(17, 189, 223);
  border-radius: 2vw;
  overflow: hidden;
  position: relative;
}
#app > .container > .mid > .top > div {
  width: 100%;
  height: 100%;
}
#app > .container > .mid > .img {
  width: 100%;
  height: 16vh;
  padding: 1vh 0;
  color: #fff;
  overflow: hidden;
}
#app > .container > .mid > .img .el-carousel__item--card {
  border: 1px solid #1BDDFA;
}
#app > .container > .mid > .img div {
  overflow: hidden;
  border-radius: 1rem;
}
#app > .container > .mid > .img img {
  width: 100%;
}
#app > .container > .mid > .bottom {
  height: 29vh;
  color: #00DFFF;
  background: url(../img/center.png) no-repeat rgba(0, 15, 71, 0.3);
  border-radius: 1vw;
  background-size: 100% 100%;
  position: relative;
  padding: 0 0.2vw;
  overflow: hidden;
}
#app > .container > .mid > .bottom > .name {
  width: 100%;
  font-size: 2vh;
  position: absolute;
  top: 1vh;
  text-align: center;
}
#app > .container > .mid > .bottom .table {
  width: 100%;
  height: 22vh;
  margin-top: 5vh;
  border-collapse: collapse;
  position: relative;
  overflow: hidden;
}
#app > .container > .mid > .bottom .table > .head {
  width: 100%;
  background: rgba(10, 37, 160, 0.2) !important;
  text-align: center;
  font-size: 1.3vh;
  padding: 1vh 0;
}
#app > .container > .mid > .bottom .table > .head > div {
  padding: 1vh 0;
  height: 4vh;
}
#app > .container > .mid > .bottom .table > .body {
  height: 16vh;
  overflow: hidden;
  position: relative;
}
#app > .container > .mid > .bottom .table > .body > table {
  width: 100%;
  border-collapse: collapse;
  transition: all 300ms;
  position: absolute;
  bottom: 0;
}
#app > .container > .mid > .bottom .table > .body > table tr {
  height: 4vh;
  box-sizing: border-box !important;
  background: rgba(10, 37, 160, 0.2);
}
#app > .container > .mid > .bottom .table > .body > table tr:nth-child(2n+1) {
  background: rgba(0, 0, 0, 0);
}
#app > .container > .mid > .bottom .table > .body > table td {
  height: 4vh;
  font-size: 0.9vh;
  white-space: nowrap;
  box-sizing: border-box !important;
  padding: 1vh 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#app > .container > .right {
  background: url(../img/right.png) no-repeat rgba(0, 15, 71, 0.3);
  background-size: 100% 100%;
}
#app > .container > .right .title {
  width: 96% !important;
  padding: 0;
}
#app > .container > .right > div {
  width: 100%;
  overflow: hidden;
}
#app > .container > .right > .header {
  height: 23vh;
  position: relative;
}
#app > .container > .right > .header > .title {
  padding-top: 3vh;
}
#app > .container > .right > .header > #circle {
  width: 100%;
  height: 18vh;
  position: absolute;
  bottom: -1vh;
  translate: scale(0.9, 0.9);
  -webkit-transform: scale(0.9, 0.9);
  /*兼容-webkit-引擎浏览器*/
  -moz-transform: scale(0.9, 0.9);
}
#app > .container > .right > .body {
  height: 24vh;
  position: relative;
}
#app > .container > .right > .body > .legend {
  width: 55%;
  position: absolute;
  top: 4.5vh;
}
#app > .container > .right > .body > .legend > div {
  font-size: 1vh;
  display: flex;
  align-items: center;
  color: #fff;
}
#app > .container > .right > .body > .legend > div > span {
  width: 1.5vh;
  height: 1vh;
  display: block;
  margin-right: 0.5vw;
  border-radius: 10px;
}
#app > .container > .right > .body > .legend > div > .low {
  background: #3DC44A;
}
#app > .container > .right > .body > .legend > div > .medium {
  background: #419AF2;
}
#app > .container > .right > .body > .legend > div > .height {
  background: #B14430;
}
#app > .container > .right > .body > .cre {
  width: 22vw;
  height: 20vh;
  overflow: hidden;
}
#app > .container > .right > .body > .cre > div {
  width: 11vw;
  height: 20vh;
  position: relative;
  translate: scale(0.85, 0.85);
  -webkit-transform: scale(0.85, 0.85);
  /*兼容-webkit-引擎浏览器*/
  -moz-transform: scale(0.85, 0.85);
}
#app > .container > .right > .body > .cre > div #correct1,
#app > .container > .right > .body > .cre > div #correct2 {
  width: 100%;
  height: 100%;
}
#app > .container > .right > .leg {
  height: 23vh;
  position: relative;
  overflow: hidden;
}
#app > .container > .right > .leg > .title {
  position: absolute;
  top: 1vh;
  z-index: 3;
}
#app > .container > .right > .leg > .legend {
  width: 55%;
  position: absolute;
  top: 6vh;
  z-index: 5;
}
#app > .container > .right > .leg > .legend > div {
  font-size: 1vh;
  display: flex;
  align-items: center;
  color: #fff;
}
#app > .container > .right > .leg > .legend > div > span {
  width: 1.5vh;
  height: 1vh;
  display: block;
  margin-right: 0.5vw;
  border-radius: 10px;
}
#app > .container > .right > .leg > .legend > div > .y {
  background: #0ff;
}
#app > .container > .right > .leg > .legend > div > .n {
  background: #12BDFF;
}
#app > .container > .right > .leg > .d {
  width: 22vw;
  height: 23vh;
}
#app > .container > .right > .leg > .d > div {
  width: 11vw;
  height: 25vh;
  translate: scale(0.7, 0.7);
  position: relative;
  -webkit-transform: scale(0.7, 0.7);
  /*兼容-webkit-引擎浏览器*/
  -moz-transform: scale(0.7, 0.7);
}
#app > .container > .right > .leg > .d > div > #participate1,
#app > .container > .right > .leg > .d > div #participate2 {
  width: 15vw !important;
  height: 23vh;
  position: absolute;
  top: 1vh;
}
#app > .container > .right > .footer {
  width: 100%;
  height: 19vh;
  overflow: hidden;
}
#app > .container > .right > .footer > .legend {
  width: 55%;
}
#app > .container > .right > .footer > .legend > div {
  font-size: 1vh;
  display: flex;
  align-items: center;
  color: #fff;
}
#app > .container > .right > .footer > .legend > div > span {
  width: 1.5vh;
  height: 1vh;
  display: block;
  margin-right: 0.5vw;
  border-radius: 10px;
}
#app > .container > .right > .footer > .legend > div > .y {
  background: #49D78A;
}
#app > .container > .right > .footer > .legend > div > .n {
  background: #F2BF0C;
}
#app > .container > .right > .footer > div {
  width: 100%;
  overflow: hidden;
}
#app > .container > .right > .footer > div > #line {
  width: 130%;
  height: 13vh;
  translate: scale(0.8, 0.8);
  -webkit-transform: scale(0.8, 0.8);
  /*兼容-webkit-引擎浏览器*/
  -moz-transform: scale(0.8, 0.8);
}
#app > .container > .right > .footer > div > #line svg g:nth-child(5) > path:last-child {
  stroke: #fff !important;
}
#app > .container .b_text {
  width: 100%;
  color: #fff;
  font-size: 1.5vh;
  position: absolute;
  bottom: 1vh;
  text-align: center;
}
#app > .Hbtn {
  width: 20vw;
  height: 10vh;
  position: absolute;
  top: 3vh;
  left: 50vw;
  margin-left: -10vw;
  cursor: pointer;
}
#app .search {
  width: 100%;
  padding: 0 1.5vw;
}
#app .search > .el-cascader {
  width: 75%;
}
#app .search > .el-cascader input {
  background-color: rgba(0, 0, 0, 0);
  color: #0ff;
}
#app .search > button {
  width: 16%;
}
.color_n,
.color_d {
  font-size: 1.4vh;
  margin-top: 0.2vh;
}
.color_d {
  color: #DF8D19;
}
.color_n {
  color: #00DFFF;
}
.el-carousel__mask {
  width: auto !important;
}
.highcharts-yaxis,
.highcharts-exporting-group {
  display: none !important;
}
